{% extends "global/Page.html" %}
{#上面那个会压紧样式 先注释掉#}
{% load otree static %}

{% block title %}
{% endblock %}
{% block content %}


{% verbatim %}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <div class="header">
                    <p>
                        当你拖动到正确的数值后，松开鼠标，滑条会变绿，如果滑条没有变绿，说明你没有拖动到正确的数值。
                    </p>
                    <p><b>正式游戏（请点击开始游戏）</b></p>
                </div>
            </el-header>
            <el-main>
                <div class="main">
                    <el-row>
                        <!-- <el-col :span="24"> -->
                            <div class="grid-content bg">
                                <div class="text">
                                    <span>您已进入本页面(秒):&nbsp;<b id="_lefttime"></b></span>
                                    <span>您当前的得分为：<b>{{point}}</b></span>
                                    <span id="changePage">剩余时间(秒):&nbsp;<b id="second">90</b></span>

                                    <div class="btn-ok">
                                        <button class="btn" id="startClock" @click="clickMath()" type="button">
                                            开始游戏
                                        </button>
                                        <button class="btn" id="submit" @click="submit()" type="submit">立即提交</button>
                                    </div>

                                </div>
                            </div>
                        <!-- </el-col> -->
                        <el-row>
                            <el-col :span="24">
                                <el-col :xs="24" :sm="12" class="col-container">
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider1" v-model="value1" @change="onChange"
                                                            :disabled="disabledFlag"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor2"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider2" v-model="value2" @change="onChange2"
                                                            :disabled="disabledFlag2"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor3"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider3" v-model="value3" @change="onChange3"
                                                            :disabled="disabledFlag3"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor4"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider4" v-model="value4" @change="onChange4"
                                                            :disabled="disabledFlag4"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class=" content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor5"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider5" v-model="value5" @change="onChange5"
                                                            :disabled="disabledFlag5"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor6"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider6" v-model="value6" @change="onChange6"
                                                            :disabled="disabledFlag6"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor7"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider7" v-model="value7" @change="onChange7"
                                                            :disabled="disabledFlag7"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor8"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider8" v-model="value8" @change="onChange8"
                                                            :disabled="disabledFlag8"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor9"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider9" v-model="value9" @change="onChange9"
                                                            :disabled="disabledFlag9"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class=" content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor10"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider10" v-model="value10" @change="onChange10"
                                                            :disabled="disabledFlag10"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                </el-col>
                                <el-col :xs="24" :sm="12" class="col-container">
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor11"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider11" v-model="value11" @change="onChange11"
                                                            :disabled="disabledFlag11"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor12"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider12" v-model="value12" @change="onChange12"
                                                            :disabled="disabledFlag12"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor13"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider13" v-model="value13" @change="onChange13"
                                                            :disabled="disabledFlag13"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class=" content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor14"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider14" v-model="value14" @change="onChange14"
                                                            :disabled="disabledFlag14"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor15"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider15" v-model="value15" @change="onChange15"
                                                            :disabled="disabledFlag15"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor16"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider16" v-model="value16" @change="onChange16"
                                                            :disabled="disabledFlag16"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor17"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider17" v-model="value17" @change="onChange17"
                                                            :disabled="disabledFlag17"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor18"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider18" v-model="value18" @change="onChange18"
                                                            :disabled="disabledFlag18"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class=" content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor19"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider id="slider19" v-model="value19" @change="onChange19"
                                                            :disabled="disabledFlag19"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                    <el-col :span="24">
                                        <div class="content-1 bg">
                                            <el-row>
                                                <el-col :span="10">
                                                    <span class="sz">请把滑条滑动到：<input type="text" id="floor20"
                                                            readonly="readonly" /></span>
                                                </el-col>
                                                <el-col :span="12">
                                                    <div>
                                                        <el-slider v-model="value20" id="slider20" @change="onChange20"
                                                            :disabled="disabledFlag20"></el-slider>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </el-col>
                                </el-col>
                            </el-col>
                        </el-row>
                        <el-col :span="24">
                            <div class="grid-content bg">
                                <p>请注意时间限制，点击开始游戏按钮，90秒之后页面将强制跳转。</p>
                                <!-- <div class="btn-ok">
                                    <button class="btn" id="startClock" @click="clickMath()" type="button">
                                        开始游戏
                                    </button>
                                    <button class="btn" id="submit" @click="submit()" type="submit">立即提交</button>
                                </div> -->
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-main>
        </el-container>
    </div>
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="{% static 'js/element-ui.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
 {#    <script src="{% static 'css/element-ui.css' %}"></script>#}
    <link rel="stylesheet" href="{% static 'css/element-ui.css' %}">
    <script type="text/javascript" src="{% static 'js/vue.js' %}"></script>
{#    <script src="//unpkg.com/vue/dist/vue.js"></script>#}
    <script src="//unpkg.com/element-ui@2.15.1/lib/index.js"></script> -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <script>
        var secondsInit = 0;

        function _fresh() {
            secondsInit++;
            var seconds = secondsInit;
            var result = '';
            result += seconds;
            document.getElementById('_lefttime').innerHTML = result;
        }
        _fresh()
        setInterval(_fresh, 1000);

        new Vue({
            el: "#app",
            data() {
                return {
                    value1: 0,
                    value2: 0,
                    value3: 0,
                    value4: 0,
                    value5: 0,
                    value6: 0,
                    value7: 0,
                    value8: 0,
                    value9: 0,
                    value10: 0,
                    value11: 0,
                    value12: 0,
                    value13: 0,
                    value14: 0,
                    value15: 0,
                    value16: 0,
                    value17: 0,
                    value18: 0,
                    value19: 0,
                    value20: 0,
                    disabledFlag: true,
                    disabledFlag2: true,
                    disabledFlag3: true,
                    disabledFlag4: true,
                    disabledFlag5: true,
                    disabledFlag6: true,
                    disabledFlag7: true,
                    disabledFlag8: true,
                    disabledFlag9: true,
                    disabledFlag10: true,
                    disabledFlag11: true,
                    disabledFlag12: true,
                    disabledFlag13: true,
                    disabledFlag14: true,
                    disabledFlag15: true,
                    disabledFlag16: true,
                    disabledFlag17: true,
                    disabledFlag18: true,
                    disabledFlag19: true,
                    disabledFlag20: true,
                    point: 0
                };
            },
            methods: {
                clickMath() {
                    this.disabledFlag = false
                    this.disabledFlag2 = false
                    this.disabledFlag3 = false
                    this.disabledFlag4 = false
                    this.disabledFlag5 = false
                    this.disabledFlag6 = false
                    this.disabledFlag7 = false
                    this.disabledFlag8 = false
                    this.disabledFlag9 = false
                    this.disabledFlag10 = false
                    this.disabledFlag11 = false
                    this.disabledFlag12 = false
                    this.disabledFlag13 = false
                    this.disabledFlag14 = false
                    this.disabledFlag15 = false
                    this.disabledFlag16 = false
                    this.disabledFlag17 = false
                    this.disabledFlag18 = false
                    this.disabledFlag19 = false
                    this.disabledFlag20 = false

                    var btn = document.getElementById("startClock");
                    btn.style.display = "none";

                    var floor = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor").value = floor;
                    var floor2 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor2").value = floor2;
                    var floor3 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor3").value = floor3;
                    var floor4 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor4").value = floor4;

                    var floor5 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor5").value = floor5;

                    var floor6 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor6").value = floor6;

                    var floor7 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor7").value = floor7;

                    var floor8 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor8").value = floor8;

                    var floor9 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor9").value = floor9;

                    var floor10 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor10").value = floor10;

                    var floor11 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor11").value = floor11;

                    var floor12 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor12").value = floor12;

                    var floor13 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor13").value = floor13;

                    var floor14 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor14").value = floor14;

                    var floor15 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor15").value = floor15;

                    var floor16 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor16").value = floor16;

                    var floor17 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor17").value = floor17;

                    var floor18 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor18").value = floor18;

                    var floor19 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor19").value = floor19;

                    var floor20 = Math.floor(Math.random() * (100 - 1) + 1);
                    document.getElementById("floor20").value = floor20;

                    var sec = document.getElementById("second");
                    var startClock = document.getElementById("startClock");
                    var i = 90;
                    var timer = setInterval(function () {
                        i--;
                        sec.innerHTML = i;
                        if (i <= 0) {
                            clearInterval(timer);
                            // {#    提交表单#}
                            submit.click();

                        }
                    }, 1000);
                },
                onChange(val) {
                    if (val == floor.value) {
                        $("#slider1 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider1 .el-slider__button").css({
                                border: "2px solid #3CB371"
                            });
                        // m = 5;
                        this.point++;
                        this.disabledFlag = true
                    } else {
                        $("#slider1 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider1 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m = 0;
                    }
                    return this.point;

                },
                onChange2(val) {
                    if (val == floor2.value) {
                        $("#slider2 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider2 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m2 = 5;
                        this.point++;
                        this.disabledFlag2 = true
                    } else {
                        $("#slider2 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider2 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m2 = 0;
                    }
                    return this.point;
                },
                onChange3(val) {
                    if (val == floor3.value) {
                        $("#slider3 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider3 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m3 = 5;
                        this.point++;
                        this.disabledFlag3 = true
                    } else {
                        $("#slider3 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider3 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m3 = 0;
                    }
                    return this.point;
                },
                onChange4(val) {
                    if (val == floor4.value) {
                        $("#slider4 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider4 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m4 = 5;
                        this.point++;
                        this.disabledFlag4 = true
                    } else {
                        $("#slider4 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider4 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m4 = 0;
                    }
                    return this.point;
                },
                onChange5(val) {
                    if (val == floor5.value) {
                        $("#slider5 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider5 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m5 = 5;
                        this.point++;
                        this.disabledFlag5 = true
                    } else {
                        $("#slider5 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider5 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m5 = 0;
                    }
                    return this.point;
                },
                onChange6(val) {
                    if (val == floor6.value) {
                        $("#slider6 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider6 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m6 = true;
                        this.point++;
                        this.disabledFlag6 = true
                    } else {
                        $("#slider6 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider6 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m6 = false;
                    }
                    return this.point;
                },
                onChange7(val) {
                    if (val == floor7.value) {
                        $("#slider7 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider7 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m7 = true;
                        this.point++;
                        this.disabledFlag7 = true
                    } else {
                        $("#slider7 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider7 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m7 = false;
                    }
                    return this.point;
                },
                onChange8(val) {
                    if (val == floor8.value) {
                        $("#slider8 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider8 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m8 = true;
                        this.point++;
                        this.disabledFlag8 = true
                    } else {
                        $("#slider8 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider8 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m8 = false;
                    }
                    return this.point;
                },
                onChange9(val) {
                    if (val == floor9.value) {
                        $("#slider9 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider9 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m9 = true;
                        this.point++;
                        this.disabledFlag9 = true
                    } else {
                        $("#slider9 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider9 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m9 = false;
                    }
                    return this.point;
                },
                onChange10(val) {
                    if (val == floor10.value) {
                        $("#slider10 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider10 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m10 = true;
                        this.point++;
                        this.disabledFlag10 = true
                    } else {
                        $("#slider10 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider10 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m10 = false;
                    }
                    return this.point;
                },
                onChange11(val) {
                    if (val == floor11.value) {
                        $("#slider11 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider11 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m11 = true;
                        this.point++;
                        this.disabledFlag11 = true
                    } else {
                        $("#slider11 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider11 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m11 = false;
                    }
                    return this.point;
                },
                onChange12(val) {
                    if (val == floor12.value) {
                        $("#slider12 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider12 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m12 = true;
                        this.point++;
                        this.disabledFlag12 = true

                    } else {
                        $("#slider12 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider12 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m12 = false;
                    }
                    return this.point;
                },
                onChange13(val) {
                    if (val == floor13.value) {
                        $("#slider13 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider13 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m13 = true;
                        this.point++;
                        this.disabledFlag13 = true
                    } else {
                        $("#slider13 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider13 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m13 = false;
                    }
                    return this.point;
                },
                onChange14(val) {
                    if (val == floor14.value) {
                        $("#slider14 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider14 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m14 = true;
                        this.point++;
                        this.disabledFlag14 = true
                    } else {
                        $("#slider14 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider14 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m14 = false;
                    }
                    return this.point;
                },
                onChange15(val) {
                    if (val == floor15.value) {
                        $("#slider15 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider15 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m15 = true;
                        this.point++;
                        this.disabledFlag15 = true
                    } else {
                        $("#slider15 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider15 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m15 = false;
                    }
                    return this.point;
                },
                onChange16(val) {
                    if (val == floor16.value) {
                        $("#slider16 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider16 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m16 = true;
                        this.point++;
                        this.disabledFlag16 = true
                    } else {
                        $("#slider16 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider16 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m16 = false;
                    }
                    return this.point;
                },
                onChange17(val) {
                    if (val == floor17.value) {
                        $("#slider17 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider17 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m17 = true;
                        this.point++;
                        this.disabledFlag17 = true
                    } else {
                        $("#slider17 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider17 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m17 = false;
                    }
                    return this.point;
                },
                onChange18(val) {
                    if (val == floor18.value) {
                        $("#slider18 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider18 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m18 = true;
                        this.point++;
                        this.disabledFlag18 = true
                    } else {
                        $("#slider18 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider18 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m18 = false;
                    }
                    return this.point;
                },
                onChange19(val) {
                    if (val == floor19.value) {
                        $("#slider19 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider19 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m19 = true;
                        this.point++;
                        this.disabledFlag19 = true
                    } else {
                        $("#slider19 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider19 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m19 = false;
                    }
                    return this.point;
                },
                onChange20(val) {
                    if (val == floor20.value) {
                        $("#slider20 .el-slider__bar").css({
                            "background-color": "#3CB371"
                        }),
                            $("#slider20 .el-slider__button").css({
                                "border": "2px solid #3CB371"
                            });
                        // m20 = true;
                        this.point++;
                        this.disabledFlag20 = true
                    } else {
                        $("#slider20 .el-slider__bar").css({
                            "background-color": "#409EFF"
                        }),
                            $("#slider20 .el-slider__button").css({
                                "border": "2px solid #409EFF"
                            });
                        // m20 = false;
                    }
                    return this.point;
                },
                submit() {
                    // if (m == false || m2 == false || m3 == false || m4 == false || m5 == false || m6 == false || m7 == false || m8 == false || m9 == false || m10 == false || m11 == false || m12 == false || m13 == false || m14 == false || m15 == false || m16 == false || m17 == false || m18 == false || m19 == false || m20 == false) {
                    //     alert("请将所有滑条滑动到正确位置再提交！");
                    // }
                    var submit = ocument.getElementById("submit");
                    submit.onclick = function () {
                        submit.click();
                    }
                }

            }
        })

    </script>
    <style>
        .el-header {
            color: #333;
            text-align: center;
            display: flex;
            /* margin-top: 30px; */
            height: 10vh !important;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            line-height: 28px;
        }

        .el-main {
            color: #333;
            text-align: center;
            height: 100% !important;
            /* margin-top: 20px; */
        }

        .bg {
            background: #f0f0f3;
        }

        /* {#.main {#}
        {#    margin: 0 80px;#}
        {#}#} */

        .grid-content {
            min-height: 50px;
            border: 1px solid black;
        }

        .content-1 {
            min-height: 50px;
        }

        .col-container {
            min-height: 500px;
            border: 1px solid black;
            padding-top: 10px;
            background: #f0f0f3;
        }

        .btn {
            width: 100px;
            /* {#height: 25px;#} */
            background: darkgray;
            border: 0.5px solid black;
            box-shadow: 3px 3px 1px rgb(126, 126, 124);
            border-radius: 3px;
            margin: 3px;
            /* outline:none; */
            cursor: pointer;
        }

        /* .btn-ok {
            display: flex;
            justify-content: flex-end;
        } */

        .text {
            display: flex;
            justify-content: space-between;
            margin: 0 15px;
            line-height: 50px;
        }

        /* .num{
          display: flex;
          justify-content: space-around;
        } */

        .form-wrapper {
            margin-top: 50px;
            width: 500px;
        }

        #floor,
        #floor2,
        #floor3,
        #floor4,
        #floor5,
        #floor6,
        #floor7,
        #floor8,
        #floor9,
        #floor10,
        #floor11,
        #floor12,
        #floor13,
        #floor14,
        #floor15,
        #floor16,
        #floor17,
        #floor18,
        #floor19,
        #floor20 {
            /* border: 0; */
            /* background:#f0f0f3; */
            outline: none;
            width: 25px;
        }

        @media screen and (max-width: 700px) {
            .main {
                margin: 0 10px;
            }
        }

        @media screen and (max-width:400px) {
            .el-header {
                margin-top: 10px;
            }
        }

        .el-slider__button {
            width: 10px;
            height: 10px;
        }
    </style>
</body>

</html>
{% endverbatim %}




{% endblock %}




